<script setup lang="ts">
import type { PatientInfo } from '@/types/user'

defineProps<{
  patientInfo: PatientInfo
}>()
const emits = defineEmits<{
  (e: 'editPatient', info: PatientInfo): void
}>()
</script>

<template>
  <div class="patient-item-page">
    <div class="info">
      <p class="top">
        <span>{{ patientInfo.name }}</span>
        <span>{{
          patientInfo.idCard.replace(/(.{6})(?:\d+)(.{4})/, '\$1****\$2')
        }}</span>
      </p>
      <p class="foot">
        <span>{{ patientInfo.gender === 1 ? '男' : '女' }}</span>
        <span>{{ patientInfo.age }}岁</span>
      </p>
    </div>
    <div class="edit">
      <DP-icon
        name="user-edit"
        color="#C3C3C5"
        @click="emits('editPatient', patientInfo)"
      ></DP-icon>
    </div>
    <van-tag v-if="patientInfo.defaultFlag === 1" type="primary" class="default"
      >默认</van-tag
    >
  </div>
</template>

<style lang="scss" scoped>
.patient-item-page {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 15px;
  background-color: var(--cp-bg);
  border-radius: 8px;
  margin-bottom: 15px;

  .info {
    .top {
      span:first-child {
        margin-right: 20px;
        font-size: 16px;
      }
    }
    .foot {
      color: var(--cp-tip);
      margin-top: 10px;
      span:first-child {
        margin-right: 20px;
      }
    }
  }
  .default {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 24px;
    right: 50px;
    width: 30px;
    height: 16px;
    font-size: 10px;
    padding: 0;
    border-radius: 2px;
    background-color: var(--cp-primary);
  }
}
</style>
